<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="toolbarDemo.jsp"%>
<%@ include file="app-add-layer.jsp"%>
<%@ include file="app-edit-layer.jsp"%>
<%--搜索框部分--%>
<form action="#" class="layui-form">
    <div class="layui-inline">
        <label>公司:</label>
        <div class="layui-inline">
            <input type="text" name="username" autocomplete="off" placeholder="请输入名称"
                   lay-verify="username" class="layui-input">
        </div>
        <button class="layui-btn layui-btn-sm" lay-submit lay-filter="user-search">搜索</button>
        <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
    </div>
</form>

<%--数据表格部分--%>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="app-edit-bar">
    <a class="layui-btn layui-btn-sm" lay-event="edit-app">编辑</a>
</script>
<script>
    layui.use(['table','layer','form','laydate'], function(){
        // 开始部分
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.$;
        var form = layui.form;
        var laydate = layui.laydate;
        // 把表格渲染到页面上
        table.render({
            elem: '#test'
            ,url:'/user/getAllApps'
            ,toolbar:'#toolbarDemo'
            ,cols: [[
                {type:'checkbox'}
                ,{field:'id', title: 'ID', sort: true}
                ,{field:'corpName', title: '公司'}
                ,{field:'appName', title: '应用名称'}
                ,{field:'appKey', title: 'appKey'}
                ,{field:'appSecret', title: '秘钥'}
                ,{field:'redirectUrl', title: '回调地址'}
                ,{field:'linit', title: '日调用量限制'}
                ,{field:'description', title: '描述'}
                ,{field:'cusId', title: '关联客户 id'}
                ,{field:'state', title: '状态', sort: true,templet:function (data) {
                        return data.state == '1'?'<span class="layui-btn layui-btn-danger layui-btn-xs" style="background: forestgreen">有效</span>'
                            : '<span class="layui-btn  layui-btn-xs" style="background:red">无效</span>';
                    }}
                ,{field:'operate',title:'操作',toolbar:'#app-edit-bar',width:180}
            ]]
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                ,limit: 2
                ,limits: [2, 4, 6, 8, 10]

            }
        });
            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'add':
                        openEditWindow(null);
                        break;
                    case 'delete':
                        var data = table.checkStatus('test').data;
                        if (data.length > 0) {
                            layer.confirm('真的删除行么', function (index) {
                                var param = ""
                                $.each(data, function (i, obj) {
                                    param += "&ids=" + obj.id
                                })
                                $.ajax({
                                    url: '/app/del',
                                    data: param,
                                    method: 'post',
                                    success: function (result) {
                                        if (result.status) {
                                            table.reload('test', {});
                                        } else {
                                            alert(result.message)
                                        }
                                        layer.close(index);
                                    }
                                })
                            });
                        }
                        break;
                };
            });

            // 打开一个弹出窗口，当data为空的时候，代表新增，当data部位空的时候，代表修改
            function openEditWindow(data) {
                // 弹出一个窗口
                layer.open({
                    type: 1
                    ,title:'编辑'
                    ,area: ['500px', '400px']
                    ,content: data == null ?$('#app-add-layer').html():$('#app-edit-layer').html()
                    ,btn: ['提交', '取消'] //可以无限个按钮
                    ,success: function(layero, index){
                        form.render(); // 显示表单的组件
                        // 为编辑模式填充数据
                        if (data != null) {
                            form.val("user-edit-form", data);
                        }

                    }
                    ,yes: function(index, layero){
                        $.ajax({
                            url: "/app/" + (data == null ? 'add' : 'update'),
                            //  url: '/sys/customer/update',
                            // id=1&name=jack
                            data: data == null ?$("#app-add-form").serialize():$("#app-edit-form").serialize(),
                            method: 'post',
                            success: function (result) {
                                if (result.status) {
                                    table.reload('test', {});
                                    layer.close(index);
                                } else {
                                    alert(result.message)
                                }
                                layer.closeAll('loading');
                            }
                        });
                    }
                });
            }
            //监听行工具事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                switch (obj.event) {
                    case 'edit-app': {
                        openEditWindow(data);
                        break;
                    }

                }
            });

        //自定义验证规则
        form.verify({
            username: function(value){
                if(value.length < 2 && value.length>0){
                    return 'name至少得2个字符啊';
                }
            }
            // ,pass: [
            //     /^[\S]{6,12}$/
            //     ,'密码必须6到12位，且不能出现空格'
            // ]
        });
        //监听提交
        form.on('submit(app-search)', function(data){
            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // })
            table.reload('test', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: data.field
            });
            return false;
        });

        form.render();
            // 结束部分
        });

</script>